<template>
    <div class="box">
        <!-- <TopSearch @searchHeader="searchHeader" @delsHeader="delsHeader" @addHeader="addHeader" :control="control"
            :controlPosition="[]" :positionName="''" :disabled="disabled" :delsable="delsable"
            :searchConfig="setFormConfig" /> -->
        <el-button v-if="tableData.length == 0 || tableData == 'null'" type="primary" :delsable="delsable" @click="addHeader(buttonType)" color="#081F42" style="margin-bottom: 15px;">添加</el-button>
        <ProTable class="protable" :data="tableData" :page="{}" :column="column" :rowControl="rowControl"
            :elProps="elProps" :disabled="disabled" :controlWidth="controlWidth" @row-control-click="onRowControlClick"
            @pageRefresh="pageRefresh">

        </ProTable>

        <fou-dialog :title="'添加/修改'" v-model:dialogValue="dialogValue" :width="'65%'">
            <template #content="">
                <el-form :model="form" label-width="100px" :rules="rules" ref="ruleFormRef">
                    <el-row :gutter="24">
                        <el-col :span="12">
                            <el-form-item label="學生" prop="student_id">
                                <el-button v-show="form.name">{{ form.name }}</el-button>
                                <el-button @click="addStudentTable" type="primary" circle icon="Search"></el-button>
                            </el-form-item>
                        </el-col>
                        <el-col :span="22">
                            <el-form-item label="備註" prop="remarks">
                                <el-col :span="20">
                                    <el-input type="textarea" v-model="form.remarks"></el-input>
                                </el-col>
                                <el-col :span="2">
                                    <el-button type="primary" icon="Search" circle @click="addRemarks('1', 'remark')">
                                    </el-button>
                                </el-col>
                            </el-form-item>
                        </el-col>
                        <el-col :span="22">
                            <el-form-item label="客戶須知" prop="notice">
                                <el-col :span="20">
                                    <el-input type="textarea" v-model="form.notice"></el-input>
                                </el-col>
                                <el-col :span="2">
                                    <el-button type="primary" icon="Search" circle @click="addRemarks('2', 'notice')">
                                    </el-button>
                                </el-col>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="狀態" prop="status">
                                <el-select v-model="form.status" size="default">
                                    <el-option v-for="item in [
                                        {
                                            value: 1,
                                            label: '正常',
                                        }, {
                                            value: -1,
                                            label: '作廢',
                                        }
                                    ]" :key="item.value" :label="item.label" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="flex justify-end mt-10 w-[100%]">
                    <el-button @click="dialogValue = false">取消</el-button>
                    <el-button type="primary" @click="confirm(ruleFormRef, buttonType)" color="#081F42">確定</el-button>
                </div>
            </template>
        </fou-dialog>
        <notes ref="notesRef" @update="getNotes"></notes>
        <studentDio ref="studentRef" @update="getStudent"></studentDio>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { loading, closeLoading, messageBox ,message} from '@/common/function.js'
import { elProps, controlWidth } from "./index.js";
import { setFormConfig } from "./formConfig";
import { presuppose, addPresuppose, updatePresuppose, delPresuppose } from '@/http/index.js'
import notes from './notes/notes.vue'
import studentDio from './student.vue'
const rules = reactive({
    student_id: [{ required: true, message: "請選擇學生", trigger: ["blur", 'change'] }],
    status: [{ required: true, message: "請選擇狀態", trigger: ["blur", 'change'] }],
});

const form = reactive({
    student_id: '',
    remarks: '',
    notice: '',
    status: ''
});
const dialogValue = ref(false);
const tableData = ref([])
const tableList = async () => {
    loading()
    const data = await presuppose()
    if (data.code == 200) {
        if (data.data) {
        tableData.value = [data.data]
        }
        console.log(tableData.value);
    }
    closeLoading()
}
const pageRefresh = async () => {
    await tableList()
}
const echo = ref({})
// 表格行内操作
const onRowControlClick = ({ scope: { row }, type }) => {
    console.log(row, type)
    if (type == 'rowedit') {
        buttonType.value = 'edit'
        const { id, notice, remarks,status,name,student_id } = row
        echo.value = { id, notice, remarks,status,name,student_id }
        Object.assign(form,echo.value)
        dialogValue.value = true;
    }
    if (type == 'rowdel') {
        messageBox().then(async () => {
            await delTaleList(row.id)
        })
    }
}
const confirm = async (formEl, type) => {
    if (!formEl) return;
    formEl.validate(async (e) => {
        if (e) {
            if (type == "add") {
                await addTaleList(form);
            }
            if (type == "edit") {
                await updateTaleList(form);
            }
            dialogValue.value = false
        }
    })
}
const addTaleList = async (e) => {
    const data = await addPresuppose(e)
    if (data.code == 200) {
        await tableList();
        message('添加預設狀態成功')
    }
}
const updateTaleList = async (e) => {
    delete e.name
    const data = await updatePresuppose(e);
    if (data.code == 200) {
        await tableList();
        message('修改預設狀態成功')
    }
}
const delTaleList = async (e) => {
    const data = await delPresuppose(e);
    if (data.code == 200) {
        await tableList();
        message('刪除預設狀態成功')
    }
}

const addHeader = async (e) => {
    buttonType.value = 'add'
    dialogValue.value = true;
};
// 字段名对应表头
const column = {
    name:'學生姓名',
    notice: '客戶須知',
    remarks: '備註',
    create_time: '發佈日期',
    update_time: "修改日期",
};
// 未选中数据是 禁用项
const disabled = ["dels"];
const delsable = ref(true);
const buttonType = ref('')
const ruleFormRef = ref('')
// 表格顶部操作按钮
const rowControl = ["rowedit"];

const studentRef = ref('')
const addStudentTable = async () => {
    await studentRef.value.TableData()
    studentRef.value.studentDia = true
}
const notesRef = ref('')
const addRemarks = async (type, name) => {
    await notesRef.value.TableData(type)
    notesRef.value.dialogValue = true
    notesRef.value.name = name
}
// 添加备注须知信息
const getNotes = (row, name) => {
    if (name == 'remark') {
        form.remarks = row.content
    }
    if (name == 'notice') {
        form.notice = row.content
    }

}
// 添加學生
const getStudent = (row) => {
    form.name = row.name
    form.student_id = row.id
}
onMounted(() => {
    tableList();
});
</script>

<style scoped lang='less'>
.box {
    padding: 16px 33px;
}
.el-col{
  padding-left: 0 !important;
}
</style>